<template>
  <div
    ref="customForm"
    class="custom-van-select custom--select custom-form-container"
  >
    <CustomVanField
      :error-message="errorMessage"
      :required="required"
      :label="label"
      :disabled="canDo"
    >
      <van-field
        readonly
        clickable
        :style="bG"
        :value="inputValue"
        :disabled="canDo"
        :placeholder="placeholder || `请选择${label}`"
        right-icon="arrow-down"
        @click="openPicker"
      />
    </CustomVanField>
    <CustomVanField
      v-if="hasFill"
      :error-message="errorMessage"
      :required="required"
      label="详细信息"
    >
      <van-field
        readonly
        clickable
        :value="inputValue"
        :placeholder="placeholder || `请选择${label}`"
        right-icon="arrow-down"
        @click="show = true"
      />
    </CustomVanField>
    <van-popup
      v-model="show"
      round
      position="bottom"
      get-container="#app"
      :close-on-click-overlay="false"
    >
      <van-area
        :area-list="areaList"
        :title="title || `选择${label}`"
        :columns-num="columnsNum"
        @confirm="handlerArea"
        @cancel="handlerCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import field from '../mixins/field';
import rule from '../mixins/rule';
import choice from '../mixins/choice';
import picker from '../mixins/picker';
import area from '../mixins/area';
import model from '../mixins/model';
import collect from '../mixins/collect/input';
import disabled from '../mixins/setting/disabled';

export default {
  name: 'CustomVanArea',

  mixins: [field, model('change'), rule, choice, picker, collect, area, disabled]
};
</script>

<style lang="scss">
</style>
